<template>
  <div>
    <div id="bottom-bar">
      <div class="children" @click="shareIt()">
        <el-button class="el-icon-share" type="text">分享</el-button>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="children" @click="commentIt()">
        <el-button class="el-icon-chat-square" type="text">{{
          comment_count == 0 ? "评论" : comment_count
        }}</el-button>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="children" @click="likeIt()" :key="talk_id">
        <el-button class="el-icon-star-on" type="text" v-if="isLike">{{
          like_count == 0 ? "赞" : like_count
        }}</el-button>
        <el-button class="el-icon-star-off" type="text" v-else>{{
          like_count == 0 ? "赞" : like_count
        }}</el-button>
      </div>
    </div>
    <div class="comment">
      <comment v-if="commentShow" :talk-info="talkinfo"></comment>
    </div>
  </div>
</template>

<script>
import { verify_fail } from "../plugins/notification";
import Comment from "./Comment.vue";

export default {
  name: "BottomBar",
  components: {
    Comment,
  },
  props: {
    talkInfo: {
      avatar: "",
      talk: {},
      uname: "",
    },
  },
  data() {
    return {
      talkinfo: this.talkInfo,
      like_count: this.talkInfo.talk.like_count,
      comment_count: this.talkInfo.talk.comment_count,
      Like2Uid: [],
      isLike: false,
      commentShow: false,
      talk_id: this.talkInfo.talk.talk_id,
    };
  },
  methods: {
    async likeIt() {
      await this.$http
        .get("/auth/verify")
        .then(async () => {
          let like_res = await this.$http
            .post(
              "/normal/like",
              {},
              {
                params: {
                  uid: this.$store.state.uid,
                  talk_id: this.talk_id,
                },
              }
            )
            .then((res) => {
              let arr = this.$store.state.likedTalkIdList;
              let beforeLikeCount = this.like_count;
              if (arr.includes(this.talk_id)) {
                this.like_count = res.data;
                this.$store.commit("removeLike", arr.indexOf(this.talk_id));
              } else {
                this.like_count = res.data;
                this.$store.commit("addLike", this.talk_id);
              }
              if (this.like_count - beforeLikeCount == 1) this.isLike = true;
              else this.isLike = false;
              // this.isLike = !this.isLike
            });
        })
        .catch((e) => {
          verify_fail();
        });
    },
    commentIt() {
      this.commentShow = !this.commentShow;
    },
    shareIt() {},
    likeJujgment() {
      // var arr = []
      let arr = this.$store.state.likedTalkIdList;
      let talk_id = this.talkInfo.talk.talk_id;
      if (arr.includes(talk_id)) {
        this.isLike = true;
      } else this.isLike = false;
    },
  },
  created() {
    if (this.$store.state.uname !== "") {
      this.likeJujgment();
    }
  },
};
</script>

<style >
#bottom-bar {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  margin-bottom: 15px;
}

.children {
  display: inline;
  width: 200px;
  font-size: 15px;
}

.el-icon-share,
.el-icon-chat-square,
.el-icon-star-off,
.el-icon-star-on {
  padding: 0 !important;
}

.el-button {
  color: gray;
}

.comment {
  background-color: #fcfcfc;
  margin-bottom: 10px;
}
</style>